<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
    append-to-body
  >
    <div>
      <div class="header">
        <el-checkbox v-model="checked">下料长度四舍五入</el-checkbox>
        <div>
          <el-button size="small" type="primary" @click="setUpAngle">角度设置</el-button>
          <el-button size="small" @click="recovery">恢复默认值</el-button>
        </div>
      </div>

      <el-tabs v-model="val" @tab-click="handleClick">
        <el-tab-pane label="箍筋拉钩" name="1">
        </el-tab-pane>
        <el-tab-pane label="180度光圆钢筋" name="2">
        </el-tab-pane>
        <el-tab-pane label="其他" name="3">
        </el-tab-pane>
      </el-tabs>

      <el-table class="tableSty" :data="tableData">
        <el-table-column label="编号" width="55" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="直径" align="center">
          <template slot-scope="scope">
            <el-input-number controls-position="right" style="width: 100%;" v-model="scope.row.number" :min="0" :max="10"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="30度" align="center">
          <template slot-scope="scope">
            <el-input-number controls-position="right" style="width: 100%;" v-model="scope.row.zip" :min="0" :max="10"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="45度" align="center">
          <template slot-scope="scope">
            <el-input-number controls-position="right" style="width: 100%;" v-model="scope.row.zip" :min="0" :max="10"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="60度" align="center">
          <template slot-scope="scope">
            <el-input-number controls-position="right" style="width: 100%;" v-model="scope.row.zip" :min="0" :max="10"></el-input-number>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>

    <angle-setting ref="angleSetting" />
  </el-dialog>
</template>

<script>
import angleSetting from './angle-setting.vue'

export default {
  name: "",
  components: {
    angleSetting
  },
  props: {},
  data() {
    return {
      dialogVisible: false,
      title: "",

      checked: true,
      val: '1',

      tableData: [
        {
          type: 1,
          name: "2",
          province: "3",
          city: "4",
          number: 4,
          address: "3410",
          zip: 6,
          showRemarks: false,
          remarks: '备注'
        },
        {
          type: 1,
          name: "2",
          province: "3",
          city: "4",
          number: 4,
          address: "3410",
          zip: 6,
          showRemarks: false,
          remarks: '备注'
        },
        {
          type: 1,
          name: "2",
          province: "3",
          city: "4",
          number: 4,
          address: "3410",
          zip: 6,
          showRemarks: false,
          remarks: '备注'
        },
      ],
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    setUp() {
      this.dialogVisible = true;
      this.title = "弯曲延伸设置";
    },
    handleClick(tab) {
      this.val = tab._props.name
    },
    setUpAngle() {
      console.log("角度设置");
      this.$refs.angleSetting.open()
    },
    recovery() {
      console.log("恢复默认值");
    },
    submitForm() {
      console.log(this.tableData)
    },
    handleClose(done) {
      this.$modal
        .confirm("确认关闭？")
        .then((_) => {
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tableSty {
  width: 100%;
  margin-top: 20px;
}
</style>
